<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<canvas id="canvas1" width="300px" height="300px"></canvas>

<script src="lib/prototype.js" type="text/javascript"></script>
<script>
    var Canvas_Timer = Class.create({
        initialize: function(canvas, num, seconds, color){
            this.ctx = canvas.getContext('2d');
            this.canvas_size = [canvas.width, canvas.height];
            this.radius = Math.min(this.canvas_size[0], this.canvas_size[1]) / 2;
            this.center = [this.canvas_size[0]/2, this.canvas_size[1]/2];
            this.seconds = seconds || 60;
            this.total = this.seconds;//a readonly var
            this.color = color || 'rgb(255,10,10)';
            this.num = $(num) || new Element('div');
            this.pe = null;
            return this;
        },
        draw_next: function(step){
            this.ctx.clearRect(0,0,this.canvas_size[0], this.canvas_size[1]);

            step = step || 1-this.seconds/this.total;

            if(step < 1) {
                this.ctx.beginPath();
                this.ctx.moveTo(this.center[0], this.center[1]); // ponto central
                this.ctx.arc(  // draw next arc
                        this.center[0],
                        this.center[1],
                        this.radius,
                        Math.PI * (-0.5 + 0), // -0.5 pra começar do topo
                        Math.PI * (-0.5 + step*2),
                        true // anti horário
                );
                this.ctx.lineTo(this.center[0], this.center[1]); // line back to the center
                this.ctx.closePath();


                this.ctx.fillStyle = this.color;    // color
                this.ctx.fill();
            }
        },
        addTime: function(time){
            this.seconds += time;
            this.total += time;
            return this;
        },
        changeSeconds: function(time){
            this.seconds = time;
            return this;
        },
        stop: function(){
            this.pe.stop();
            return this;
        },
        start: function(){
            this.pe = new PeriodicalExecuter(function(pe){
                this.num.update(this.seconds);
                this.draw_next();
                if(this.seconds-- === 0){
                    pe.stop();
                }
            }.bind(this), 1);
            return this;
        }
    });

    var myClock = new Canvas_Timer($("canvas1"));
    myClock.start();
</script>
</body>
</html>